<!--
  ~ Copyright [2021-present] [ahoo wang <ahoowang@qq.com> (https://github.com/Ahoo-Wang)].
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<nz-layout>
  <nz-sider nzCollapsible
            nzBreakpoint="md"
            [(nzCollapsed)]="isCollapsed"
  >
    <div class="logo">
      <a href="https://github.com/Ahoo-Wang/CoSky" target="_blank">
        <h1>{{ title }}</h1>
      </a>
    </div>
    <ul nz-menu nzTheme="dark" nzMode="inline">
      <li nz-menu-item nzMatchRouter routerLink="/home">
        <i nz-icon nzType="dashboard"></i>
        <span>Dashboard</span>
      </li>
      <li nz-menu-item nzMatchRouter routerLink="/topology">
        <i nz-icon nzType="radar-chart"></i>
        <span>Topology</span>
      </li>
      <li nz-menu-item nzMatchRouter routerLink="/config">
        <i nz-icon nzType="file"></i>
        <span>Configuration</span>
      </li>
      <li nz-menu-item nzMatchRouter routerLink="/service">
        <i nz-icon nzType="cloud-server"></i>
        <span>Service</span>
      </li>
      <li nz-menu-item nzMatchRouter routerLink="/namespace">
        <i nz-icon nzType="partition"></i>
        <span>Namespace</span>
      </li>
      <li nz-submenu nzTitle="Security" nzIcon="security-scan">
        <ul>
          <li nz-menu-item nzMatchRouter routerLink="/user">
            <i nz-icon nzType="user"></i>
            <span>User</span>
          </li>
          <li nz-menu-item nzMatchRouter routerLink="/role">
            <i nz-icon nzType="security-scan"></i>
            <span>Role</span>
          </li>
          <li nz-menu-item nzMatchRouter routerLink="/audit-log">
            <i nz-icon nzType="audit"></i>
            <span>Audit Log</span>
          </li>
        </ul>
      </li>
    </ul>
  </nz-sider>
  <nz-layout class="content">
    <nz-header>
      <div>
        <span class="trigger" (click)="isCollapsed = !isCollapsed">
            <i class="trigger"
               nz-icon
               [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
            ></i>
        </span>
        <app-namespace-selector></app-namespace-selector>
        <div style="float: right;padding-right: 100px">
          <a nz-dropdown [nzDropdownMenu]="signStatusMenu">
            <i nz-icon nzType="user" nzTheme="outline"></i>
            {{ currentUser.sub }}
            <i nz-icon nzType="down"></i>
          </a>
          <nz-dropdown-menu #signStatusMenu="nzDropdownMenu">
            <ul nz-menu nzSelectable>
              <li nz-menu-item (click)="openChangePwd()">Change Password</li>
              <li nz-menu-divider></li>
              <li nz-menu-item nzDanger (click)="signOut()">
                <i nz-icon nzType="logout" nzTheme="outline"></i>Sign out
              </li>
            </ul>
          </nz-dropdown-menu>
        </div>
      </div>
    </nz-header>
    <nz-content>
      <nz-water-mark nzContent="{{currentUser.sub}}">
        <div class="inner-content">
          <router-outlet></router-outlet>
        </div>
      </nz-water-mark>
    </nz-content>
    <nz-footer>
      <a href="https://github.com/Ahoo-Wang/CoSky" target="_blank"
         title="High-performance, low-cost microservice governance platform. Service Discovery and Configuration Service.">CoSky</a>
      © 2021-present
    </nz-footer>
  </nz-layout>
</nz-layout>
